<template>
  <div>
    <div class="container">
      <div class="reg_box">
        <div class="reg_left">
          <img src="/images/zcbj.png" alt="" />
        </div>
        <div class="reg_right">
          <div class="reg_title">
            <a href=""> <img src="/images/log.png" alt="" /></a>

            <div class="reg_tip"><h2>小米账户</h2></div>
          </div>
          <div class="reg_content">
            <div class="conBox">
              <div class="cb_tilte">
                <div class="login">
                  <a @click="Login">登录</a>
                </div>
                <div class="register">
                  <a @click="Register">注册</a>
                </div>
              </div>
              <div class="cb_input">
                <div class="ipt">
                  <input
                    type="text"
                    v-model="getData.phone"
                    placeholder="邮箱/手机号码/小米ID"
                  />
                </div>
                <div class="ipt">
                  <input
                    type="password"
                    v-model="getData.password"
                    placeholder="密码"
                  />
                </div>

                <div class="btn">
                  <button @click="OnLogin">登录</button>
                </div>
                <div class="cb_tip">
                  <div class="cb_lf"><a href="">忘记密码?</a></div>
                  <div class="cb_rg"><a href="">手机号登录</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLogin } from "../assets/js/request.js";
export default {
  data() {
    return {
      getData: {
        phone: "",
        password: "",
      },
    };
  },
  components: {},
  methods: {
    // ...mapActions(["saveUserName"]),
    OnLogin() {
      getLogin(this.getData).then((res) => {
        // console.log(res);
        sessionStorage.setItem("token", res.token);
        this.$store.dispatch("SaveUsername", res.name);
        alert("恭喜您登录成功");
        this.$router.push("/");
      });
    },
    Login() {
      this.$router.push("/login");
    },
    Register() {
      this.$router.push("/register");
    },
    // Comeback() {
    //   this.$router.push("/");
    // },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/reset.scss";
@import "@/assets/scss/base.scss";
.reg_box {
  width: 100%;
  display: flex;
  .reg_left {
    float: left;
    img {
      width: 445px;
      height: 700px;
    }
  }
  .reg_right {
    background-color: #f5f5f5;
    .reg_title {
      display: inline-block;
      float: left;
      img {
        margin: 20px;
        width: 50px;
        height: 50px;
        display: block;
        float: left;
      }
      .reg_tip {
        display: block;
        float: left;
        margin: 30px 10px;
      }
    }
    .reg_content {
      margin-top: 80px;
      width: 1080px;
      height: 610px;
      /* background-color: skyblue; */

      .conBox {
        width: 400px;
        height: 550px;
        margin: 10px auto;
        background-color: white;
        border-radius: 5px;
        /* background-color: aquamarine; */
        .cb_tilte {
          width: 400px;
          height: 50px;
          display: flex;
          /* background-color: red; */

          .login {
            display: block;
            font-size: 20px;
            margin: 15px;
            padding-bottom: 30px;
            border-bottom: 5px solid orangered;
            a {
              color: black;
            }
          }
          .register {
            display: block;
            font-size: 20px;
            margin: 15px;
            a {
              color: #ccc;
            }
          }
        }
        .cb_input {
          padding-top: 30px;
          .ipt {
            /* margin-top: 5px; */
            width: 250px;
            height: 50px;
            margin: 0 auto;
            input {
              margin-top: 25px;
              display: block;
              width: 250px;
              height: 50px;
              border-radius: 5px;
              border: none;
              background-color: #f5f5f5;
              padding-left: 10px;
            }
          }
        }
        .btn {
          width: 250px;
          height: 50px;
          margin: 0 auto;
          button {
            width: 250px;
            height: 50px;
            display: block;
            margin: 20px auto;
            background-color: orangered;
            color: white;
            border: none;
            border-radius: 5px;
          }
        }
        .cb_tip {
          width: 250px;
          height: 50px;
          margin: 10px auto;
          .cb_lf {
            display: block;
            float: left;
            a {
              color: orangered;
            }
          }
          .cb_rg {
            display: block;
            float: right;
            a {
              color: orangered;
            }
          }
        }
      }
    }
  }
}
</style>